<template>
  <div class="home">
    <div class="header">
      <div class="head">
        <div class="location" @click="$router.push(`/city/${currentCity}`)">
          {{ currentCity }}
        </div>
        <div class="search">
          <van-icon name="search" />
            <van-field
              v-model="city"
              placeholder="请输入城市名:北京"
              class="search"
              @keydown.enter="searchHouse"
            />
          <div class="map"><van-icon name="location-o" size="30px" @click="$router.push('/map')"/></div>
        </div>
      </div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image.imgSrc" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="nav">
      <div class="icon">
        <div class="div1">
          <van-icon
            name="wap-home"
            size="40px"
            color="pink"
            @click="$router.push('/find')"
          />
        </div>
        <p>整租</p>
      </div>
      <div class="icon">
        <div class="div1">
          <van-icon
            name="friends"
            size="40px"
            color="pink"
            @click="$router.push('/find')"
          />
        </div>
        <p>合租</p>
      </div>
      <div class="icon">
        <div class="div1">
          <van-icon name="location" size="40px" color="pink" @click="$router.push('/map')"/>
        </div>
        <p>地图找房</p>
      </div>
      <div class="icon">
        <div class="div1">
          <van-icon
            name="shop"
            size="40px"
            color="pink"
            @click="$router.push('/addHouse')"
          />
        </div>
        <p>去出租</p>
      </div>
    </div>

    <div class="rent">
      <div class="top">
        <h3>租房小组</h3>
        <p>更多</p>
      </div>
      <div class="main">
        <ul>
          <li v-for="item in rentItem" :key="item.id">
            <div class="pic">
              <img :src="item.imgSrc" alt="">
            </div>
            <div class="content">
              <p class="title">{{item.title}}</p>
              <p class="desc">{{item.desc}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getSwipper } from '@/api/home'
import { rentHouseItem } from '@/api/house'
export default {
  name: 'home-page',
  data () {
    return {
      images: [],
      currentCity: '上海',
      city: '',
      rentItem: []
    }
  },
  methods: {
    searchHouse () {
      this.$router.push(`search/${this.city}`)
    }
  },
  async created () {
    const { body } = await getSwipper()
    body.forEach(item => {
      item.imgSrc = 'http://liufusong.top:8080' + item.imgSrc
    })
    this.images = body

    if (this.$route.query.name) {
      this.currentCity = this.$route.query.name
      localStorage.setItem('currentCity', this.currentCity)
    }

    const res = await rentHouseItem(this.$route.query.value)
    console.log(res)
    if (res) {
      res.body.forEach(item => {
        item.imgSrc = 'http://liufusong.top:8080' + item.imgSrc
      })
    }
    this.rentItem = res.body
  }
}
</script>

<style lang="less" scoped>
body {
* {
  margin: 0;
  padding: 0;
}
  .home {
    .header {
      position: relative;
      img {
        height: 225px;
      }
      .head {
        position: relative;
        position: fixed;
        left: 47px;
        top: 24px;
        z-index: 999;
        display: flex;
        align-content: center;
        margin: 0 auto;
        width: 280px;
        height: 30px;
        background-color: #fff;
        .location {
          margin-top: 7px;
          margin-left: 10px;
          width: 60px;
          font-size: 14px;
          height: 15px;
          line-height: 15px;
          border-right: 1px solid #000;
        }
        .search {
          display: flex;
          align-items: center;
          margin-left: 6px;
          line-height: 10px;
          height: 30px;
          p {
            font-size: 12px;
            color: #ccc;
          }
          i {
            margin-right: 8px;
          }
          .map {
            position: absolute;
            right: -40px;
            top: -1px;
            width: 30px;
            height: 30px;
          }
        }
      }
    }
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 20px;
      height: 120px;
      background-color: #fff;
      .icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        width: 60px;
        height: 105px;

        text-align: center;
        .div1 {
          width: 60px;
          height: 60px;
          line-height: 79px;
          border-radius: 50%;
          background-color: #f5f5f9;
        }
        p {
          font-size: 15px;
        }
      }
    }
    /deep/ .rent {
     padding-top: 12px;
     padding-bottom: 12px;
     padding-left: 15px;
     padding-right: 15px;
      height: 190px;
      background-color: #f6f5f6;
      .top {
        display: flex;
        justify-content: space-between;
      }
      .main {
        width: 100%;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          height: 160px;
          li {
            display: flex;
            align-items: center;
            width: 165px;
            background-color: #fff;
          .pic {
            margin-right: 8px;
            img {
              width:50px;
              height: 50px;
            }
          }
          .content {
            font-size: 14px;
            .desc {
              margin-top: 4px;
            }
          }
        }
        }
      }
    }
  }
}
</style>
